// 人员信息输入表单
<template>
<div class="personal-form" :class="type">
    
    <Form label-position='left' :label-width='74' :model='data' :rules='validate' ref='formValidate'>
        <Row>

            <Col v-for='(item, index) of conf' :key='index' :span='item.span'>
                <FormItem :label='item.label' :prop='item.key'>
                    <component v-model="data[item.key]" :conf='item.conf' :is="item.component"></component>
                </FormItem>
            </Col>
        </Row>
    </Form>

</div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import { createDecorator } from 'vue-class-component'
import packComponents from '@/components/ivew_components/parck_components/index'
import idCardConf from '@/components/ivew_conf/idCard_conf'
import personalNatrue from '@/components/ivew_conf/personal_natrue'
import nickname from './nickname';


@Component({})
export default class personalForm extends Vue{
    name:string = 'personal-form'

    // 人员信息
    @Prop()
    data:any

    // 组件类型(未配置)
    @Prop({
        default: 'default'
    })
    type:string

    // 提取验证
    get validate (){
        let ruleValidate = {};

        this.conf.forEach(item =>{

            if(item.ruleValidate && item.ruleValidate.length){
                ruleValidate[item.key] = item.ruleValidate;
            }
            
        })

        return ruleValidate;
        
    }

    // 表单配置
    conf:formInf.parckCmp[] = [
        {
            label: '人员名称',
            span: 24,
            component: packComponents('input'), 
            key: 'nickname',
            ruleValidate:[
                {required:true, trigger:'blur' , message:'信息不能为空'}
            ]
        },
        {
            label: '证件类型',
            span: 24,
            component: packComponents('select'), 
            conf: {
                options: idCardConf
            },
            key: 'idCardKind',
            ruleValidate:[
                {required:true, trigger:'blur' , message:'信息不能为空'}
            ]
        },
        {
            label: '证件编号',
            span: 24,
            component: packComponents('input'), 
            conf: {},
            key: 'idCardNumber',
            ruleValidate:[
                {required:true, trigger:'blur' , message:'信息不能为空'}
            ]
        },
        {
            label: '手机号码',
            span: 24,
            component: packComponents('input'), 
            conf: {},
            key: 'phone',
            ruleValidate:[
                {required:true, trigger:'blur' , message:'信息不能为空'}
            ]
        },
        {
            label: '联系人',
            span: 24,
            component: packComponents('input'), 
            conf: {},
            key: 'contact',
        },
        {
            label: '联系地址',
            span: 24,
            component: packComponents('input'), 
            conf: {},
            key: 'address',
        },
        {
            label: '人员类型',
            span: 24,
            component: packComponents('radioGroup'), 
            conf: {
                radios: personalNatrue.conf,
                type:'button'
            },
            key: 'kind',
            ruleValidate:[
                {required:true, trigger:'blur' , message:'信息不能为空'}
            ]
        },
        
    ]

    // 返回验证对象
    mounted(){
        this.$emit('validate', this.$refs['formValidate'])
    }

    
}


</script>

<style scoped lang='scss'>

.personal-form.default{


    .btns{
        text-align: center;

        button + button{
            margin-left: _rem(10px);
        }
    }
}

</style>